<template>
	<view class="page">
		<free-nav-bar showback showright="true" title="查看用户资料">
			<free-icon-button slot="right" @click="openAction">&#xe6fd;</free-icon-button>
		</free-nav-bar>
		<view class="px-3 py-4 flex align-center bg-white border-bottom">
			<free-avater size="120"
				:src="detail.avatar==''? 'https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1':detail.avatar">
			</free-avater>
			<view class="flex flex-column ml-3  flex-1">
				<view class="flex align-center justify-between">
					<text class="font-lg font-weight-bold ">{{detail.nickname?detail.nickname:detail.username}}</text>
					<image src="../../../static/images/star.png" v-if="detail.star" style="width: 40rpx;height: 40rpx;"
						mode=""></image>
				</view>

				<text class="font-md text-light-muted">微信号：{{detail.username}}</text>
				<text class="font-md text-light-muted">地区：{{detail.area}}</text>
			</view>
		</view>

		<free-list-item title="标签" showright isshowjt>
			<view slot="title1" class="flex align-center" @click="navigatebq()">

				<text class="font-md text-dark mr-3">标签</text>
				<text class="font-md text-light-muted" style="margin-right: 20rpx;" v-for="item,index in tagList">{{item}}</text>
				<text class="font-md text-light-muted" v-if="tagList.length<1">未设置</text>
			</view>
		</free-list-item>
		<free-divider></free-divider>
		<free-list-item title="朋友圈" showright isshowjt>
			<view slot="title1" class="flex align-center">

				<text class="font-md text-dark mr-3">朋友圈</text>
				<image src="../../../static/demo.jpg" class="mr-2" mode="" style="width: 90rpx;height: 90rpx;"></image>
				<image src="../../../static/demo.jpg" class="mr-2" mode="" style="width: 90rpx;height: 90rpx;"></image>
			</view>
		</free-list-item>
		<free-list-item title="更多信息" showright isshowjt></free-list-item>

		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white" v-if="detail.friend&&detail.isblack == 0" hover-class="bg-light">
			<text class="font text-primary">&#xe64e;</text>
			<text class="font text-primary" @click="sendmessage()">发消息</text>

		</view>
		<view class="py-3 flex align-center justify-center bg-white" v-if="detail.friend&&detail.isblack == 1" hover-class="bg-light">
			
			<text class="font text-primary" @click="setblack()">移除黑名单</text>
		
		</view>
		<view class="py-3 flex align-center justify-center bg-white" v-if="!detail.friend&&detail.id!==userid" hover-class="bg-light">
			<text class="font text-primary">&#xe64e;</text>
			<text class="font text-primary" @click="addfriend()">添加好友</text>
		
		</view>
		<free-popup ref="extend" bodyColor="bg-dark" maskColor :bodyWidth="320" >
			<scroll-view class="border-top border-light-secondary bg-white" scroll-y
				style="height: 740rpx;width: 100vw;bottom:374rpx">
				<!-- 				height: 628rpx;width: 100vw;bottom:314rpx;color:
				white -->
				<free-list-item title="设置备注和标签" isshowjt showright="false" @click="navigatebq()">
					<text class="iconfont font-lg py-2" slot="icon">&#xe6b3;</text>
					<view class="position-relative p-1" slot="right">

					</view>
				</free-list-item>
				<free-list-item title="把他推荐给朋友" isshowjt showright="false" @click="sendcard()">
					<text class="iconfont font-lg py-2" slot="icon">&#xe613;</text>
					<view class="position-relative p-1" slot="right">

					</view>
				</free-list-item>
				<free-list-item v-if="detail.friend == true" :title="detail.star == 0?'设为星标朋友':'取消星标'" @click="setStar()" isshowjt :showright="false">
					<text class="iconfont font-lg py-2" slot="icon">&#xe6b0;</text>
					<view class="position-relative p-1" slot="right">

					</view>
				</free-list-item>
				<free-list-item v-if="detail.friend" title="设置朋友圈和动态权限" isshowjt showright="false" @click="setfriend()">
					<text class="iconfont font-lg py-2" slot="icon">&#xe667;</text>
					<view class="position-relative p-1" slot="right">

					</view>
				</free-list-item>
				<free-list-item v-if="detail.friend" :title="detail.isblack == 1?'移除黑名单': '加入黑名单'" isshowjt :showright="false" @click="setblack()">
					<text class="iconfont font-lg py-2" slot="icon">&#xe638;</text>
					<view class="position-relative p-1" slot="right">

					</view>
				</free-list-item>
				<free-list-item v-else title="添加好友" isshowjt :showright="false" @click="setblack()">
					<text class="iconfont font-lg py-2" slot="icon">&#xe638;</text>
					<view class="position-relative p-1" slot="right">
				
					</view>
				</free-list-item>
				<free-list-item title="投诉" isshowjt showright="false" @click="tousu()">
					<text class="iconfont font-lg py-2" slot="icon">&#xe61c;</text>
					<view class="position-relative p-1" slot="right">

					</view>
				</free-list-item>
			</scroll-view>
		</free-popup>
	</view>
</template>

<script>
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import freeDivider from "@/components/free-ui/free-divider.vue"
	import $H from '../../../utils/request.js';
	import auth from "@/common/mixin/auth.js"
	import freePopup from "@/components/free-ui/free-popup.vue"
	export default {
		data() {
			return {
				tagList: [],
				star: false,
				detail:{},
				userid:window.localStorage.getItem("user_id"),
				isBlack:false
			}
		},
		mixins:[auth],
		components: {
			freePopup,
			freeNavBar,
			freeListItem,
			freeAvater,
			freeDivider,
			freeIconButton
		},
	onShow() {
		if(this.detail.id){
	this.getdetail(this.detail.id)
			
		}
		},
		onLoad(option) {
			console.log(option,"option");
			if(!option.id){
				uni.navigateBack({
					delta:1
				})
				uni.showToast({
					title:"非法参数"
				})
			}
			this.getdetail(option.id)
			uni.$on("setTag", e => {
				console.log(e, "e");
				if(e){
		this.tagList = JSON.parse(e)
					
				}
			})
		},
		methods: {
			getdetail(id){
				$H.post(`friend/read/${id}`,{
					token: true
				}).then(res => {
					
					if(res){
					this.detail=res
					this.tagList=res.tags						
					}else{
						uni.showToast({
							title:"该用户不存在",
							icon:none
						})
					}

				})
			},
			tousu(){
				console.log(123);
				uni.navigateTo({
					url:"/pages/mail/userReport/userReport?type=user&&id="+this.detail.id
				})
			},
			addfriend(){
				uni.navigateTo({
					url:"/pages/mail/addFriend/addFriend?text='添加好友'&&id="+this.detail.id
				})
			},
			sendmessage(){
				if(this.isBlack == true){
					uni.showToast({
						title:"请先移出黑名单",
						icon:"error"
					})
				}else{
					this.detail.name=this.detail.nickname?this.detail.nickname:this.detail.username
					uni.navigateTo({
						url:"/pages/chat/chat?type=user&&params="+encodeURIComponent(JSON.stringify(this.detail)) 
					})
				}
			},
			sendcard(){
				uni.navigateTo({
					url:"/pages/mail/sendCard/sendCard"
				})
			},
			
			setfriend() {
				uni.navigateTo({
					url: "/pages/mail/userMomentAuth/userMomentAuth?id="+this.detail.id
				})
			},
			openAction() {
				this.$refs.extend.show()

			},
			navigatebq() {
				console.log(12334);
				uni.navigateTo({
					url: "/pages/mail/userRemark/userRemark?params="+JSON.stringify(this.detail)
				})
			},
			setStar() {
				if(this.detail.star == 0){
					$H.post("friend/setstar/"+this.detail.id,{star:1},{token:true}).then(res=>{
						console.log(res)
						if(res){
							this.getdetail(this.detail.id);
						}
					})
				}else{
					$H.post("friend/setstar/"+this.detail.id,{star:0},{token:true}).then(res=>{
						console.log(res)
						if(res){
							this.getdetail(this.detail.id);
						}
					})
				}
				// this.star = !this.star;
				this.$refs.extend.hidden()
			},
			setblack() {
				if(this.detail.isblack == 0){
					uni.showModal({
						title: "是否加入黑名单？",
					
						success: (res) => {
							if (res.confirm) {
								$H.post("friend/setblack/"+this.detail.id,{isblack:1},{token:true}).then(res=>{
									console.log(res)
									if(res){
										this.getdetail(this.detail.id);
										uni.showToast({
											title:"加入黑名单成功",
										icon:"none"
										})
									}
								})
								
					
							}
						}
					
					})
				}else{
					uni.showModal({
						title: "是否移除黑名单？",
					
						success: (res) => {
							if (res.confirm) {
							$H.post("friend/setblack/"+this.detail.id,{isblack:0},{token:true}).then(res=>{
								console.log(res)
								if(res){
									this.getdetail(this.detail.id);
									uni.showToast({
										title:"移除黑名单成功",
									icon:"none"
									})
								}
							})
								
					
							}
						}
					
					})
				}
				this.$refs.extend.hidden()
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
</style>
